// import React, {useState} from "react"; // 无论怎么样，先养成习惯，导入React包，因为jsx中div这种，实际上是React.createElement，
// // 并不是真正意义上的dom, 所以要引入React避免作用域找不到React
// import names from "@/data/list/names";
//
// const UseTransition = function () {
//   }
//   const [nameList, setNameList] = useState(names);
//   const onInput = function (e) {
//     const currentName = e.target.value;
//     if(currentName){
//       const filNames = names.filter(item=> item.includes(currentName)); // 现在的数据为一万条，就会在删除的时候开始卡顿。
//       // 因为onInput整个函数执行完毕才会有执行dom上的回显，所以等待这个有点慢。而你又不能在这外层加上延时器，会死循环报错。
//       setNameList(filNames);
//     }
//   }
//   return <div>
//     <input onInput={onInput}/>
//     <h4>用户列表</h4>
//     <ul>
//       {nameList.map((item, i) => {
//         return (
//           <li key={i}>{item}</li>
//         )
//       })}
//     </ul>
//   </div>
// }
//
// export default React.memo(UseTransition);

import React, { useState, useTransition } from "react" // 无论怎么样，先养成习惯，导入React包，因为jsx中div这种，实际上是React.createElement，
import names from "@/data/list/names"

const UseTransition = function () {
  // useTransition在告诉react对于某部分任务的更新优先级较低，可以稍后进行更新
  //   useTransition()钩子能够帮助你区分紧急的UI更新和非紧急的UI更新。
  const [nameList, setNameList] = useState(names)
  const [isPending, callback] = useTransition() // isPending才是主要用它的原因
  const onInput = function (e) {
    const currentName = e.target.value
    if (currentName) {
      callback(() => {
        const filNames = names.filter((item) => item.includes(currentName)) // 现在的数据为一万条，就会在删除的时候开始卡顿。
        setNameList(filNames)
      })
    }
  }
  return (
    <div>
      <span>查询列表：</span>
      <input onInput={onInput} />
      <h4>用户列表(useTransition版)</h4>
      {isPending ? (
        "加载中"
      ) : (
        <ul>
          {nameList.map((item, i) => {
            return <li key={i}>{item}</li>
          })}
        </ul>
      )}
    </div>
  )
}

export default React.memo(UseTransition)
